<template>
  <div class="parameterStatistical flowCloumn h100">
    <div class="constentmain h100">
      <div class="topSearch">
        <span class="searchItem">
          <el-date-picker
            v-model="searchYear"
            value-format="yyyy"
            type="year"
            placeholder="选择年份"
            @change="searchData"
          ></el-date-picker>
        </span>
        <span class="searchItem">
          <el-select v-model="searchDept" placeholder="请选择" @change="searchData">
            <el-option
              v-for="item in deptOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </span>
      </div>
      <div class="statisticalContent">
        <div class="statisticalLeft">
          <div class="leftTop">
            <div class="contentTitle">项目预览</div>
            <div id="overviewPie" style="width: 400px;height:300px;" class="overviewPie"></div>
          </div>
          <div class="leftBottom">
            <div class="contentTitle">项目大事记</div>
            <div class="memorabiliaContent">
              <template v-for="(item,index) in memorabiliaListData">
                <el-row :key="index">
                  <div
                    class="lineContent"
                    :class="item.read?'readLine':''"
                    @click="intoDetails(item)"
                  >
                    <span class="lineIcon">
                      <span class="vertical"></span>
                      <span class="iconCircle">
                        <i class="el-icon-time"></i>
                      </span>
                      <span class="vertical"></span>
                    </span>
                    <span class="circle" :class="item.read?'hiddenCircle':''"></span>
                    <span class="lineTitel" :title="item.title">{{item.title}}</span>
                    <span class="lineDate">{{item.createTime}}</span>
                  </div>
                </el-row>
              </template>
              <div class="empty" v-if="memorabiliaListData.length == 0">暂无数据</div>
            </div>
          </div>
        </div>
        <div class="statisticalRight">
          <div class="contentTitle">项目进展</div>
          <div class="reightTop">
            <div class="reightTopTitle">工程项目</div>
            <div class="reightContent">
              <template v-for="(item,index) in projectData">
                <el-row :key="index" class="progressLine">
                  <span class="lineLable" :title="item.label">{{item.label}}</span>
                  <span
                    class="lineProgress"
                    :class="item.status=='lag'? 'lag':item.num == 100?'end':''"
                  >
                    <el-progress
                      :key="index"
                      :stroke-width="8"
                      :percentage="item.num"
                      :color="colorMethod(item)"
                    ></el-progress>
                  </span>
                  <span class="progressDescribe lagData" v-if="item.status == 'lag'">滞后</span>
                  <span class="progressDescribe complete" v-else-if="item.num == 100">完成</span>
                </el-row>
              </template>
              <div class="empty" v-if="projectData.length == 0">暂无数据</div>
            </div>
          </div>
          <div class="rightBottom">
            <div class="reightTopTitle">采购项目</div>
            <div class="reightContent">
              <template v-for="(item,index) in purchaseData">
                <el-row :key="index" class="progressLine">
                  <span class="lineLable" :title="item.label">{{item.label}}</span>
                  <span class="lineProgress">
                    <el-progress
                      :key="index"
                      :stroke-width="8"
                      :percentage="item.num"
                      :color="colorMethod(item)"
                    ></el-progress>
                  </span>
                  <span class="progressDescribe lagData" v-if="item.status == 'lag'">滞后</span>
                  <span class="progressDescribe complete" v-else-if="item.num == 100">完成</span>
                </el-row>
              </template>
              <div class="empty" v-if="purchaseData.length == 0">暂无数据</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <memorabiliaDetails
      v-if="showDetails"
      :showDetails.sync="showDetails"
      :rowData="memorabiliaData"
      showType="detail"
      noFootBtn
    />
  </div>
</template>
<script>
import {
  getProjectDeptApi, //获取项目台账的所有部门
  getProjectOverviewApi, //获取项目台账的项目概览统计
  getProjectProgressApi, //获取项目台账的项目进度条统计
  getMemorabiliaListApi //项目大事记列表
} from "@/api/specialManagement/specialParameter";
import memorabiliaDetails from "./memorabiliaDetails";
export default {
  components: { memorabiliaDetails },
  props: {
    rowData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      deptOption: [],
      searchYear: "",
      searchDept: "",
      showDetails: false, //里程碑详情
      memorabiliaListData: [],
      projectData: [],
      purchaseData: [],
      overviewOption: {
        color: ["#ffba00", "#3aa1ff", "#62c433"],
        tooltip: {
          trigger: "item",
          formatter: " {b}: {d}%"
        },
        legend: {
          orient: "vertical",
          top: "10%",
          right: "right"
        },
        series: [
          {
            name: "项目完成进度",
            type: "pie",
            radius: ["40%", "60%"],
            avoidLabelOverlap: false,
            label: {
              position: "center",
              fontSize: 14,
              formatter: " {b} \n\n {@num} 个"
              // formatter: function(params) {
              //   var res =
              //     params.name +
              //     '/n /br <span style="font-size:36px"> ' +
              //     params.data.num +
              //     '</span>个';
              //   console.log(params);
              //   return res;
              // }
            },
            labelLine: {
              show: false
            }
          }
        ],
        dataset: [
          {
            source: [
              //   { value: 30, name: "已完成" },
              //   { value: 70, name: "未完成" }
            ]
          }
        ]
      }
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      //初始化年份
      let cerrenDate = new Date();
      this.searchYear = cerrenDate.getFullYear().toString();
      this.getProjectDept();
    },
    initPei(data) {
      var overviewPie = this.$echarts.init(
        document.getElementById("overviewPie")
      );
      let optionData = data.keyValue || [];
      optionData.map(i => {
        i.label = this.$store.getters["fineDirtDataName"](
          "sp_project_status",
          i.label
        );
        i.value = i.num;
      });
      this.overviewOption.dataset[0].source = optionData;
      overviewPie.setOption(this.overviewOption);
    },

    getProjectDept() {
      getProjectDeptApi().then(res => {
        let data = res.data || [];
        let deptArr = [];
        data.map(i => {
          let obj = {
            value: i.id,
            label: i.name
          };
          deptArr.push(obj);
        });
        this.searchDept = deptArr[0].value;
        this.deptOption = deptArr;
        this.searchData();
      });
    },
    //获取项目概览的数据
    getProjectOverview() {
      let form = {
        hostDeptId: this.searchDept,
        year: this.searchYear
      };
      getProjectOverviewApi(form).then(res => {
        this.initPei(res.data || []);
      });
    },
    //获取项目进展的数据
    getProjectProgress() {
      let form = {
        hostDeptId: this.searchDept,
        year: this.searchYear
      };
      getProjectProgressApi(form).then(res => {
        this.projectData = res.data.project || [];
        // this.projectData = [
        //   {
        //     label: "测试",
        //     num: 20,
        //     status: "lag"
        //   },
        //   {
        //     label: "测试2",
        //     num: 100,
        //     status: ""
        //   },
        //   {
        //     label: "测试3",
        //     num: 60,
        //     status: ""
        //   }
        // ];
        this.purchaseData = res.data.purchase || [];
      });
    },
    //获取项目大事件列表数据
    getMemorabiliaList() {
      let form = {
        hostDeptId: this.searchDept,
        year: this.searchYear
      };
      getMemorabiliaListApi(form).then(res => {
        this.memorabiliaListData = res.data.list || [];
      });
    },
    //查询数据
    searchData() {
      this.getProjectOverview();
      this.getProjectProgress();
      this.getMemorabiliaList();
    },
    colorMethod(item) {
      if (item.status == "lag") {
        return "#eb4444";
      } else if (item.num == 100) {
        return "#62c433";
      } else {
        return "#2c77f4";
      }
    },

    intoDetails(data) {
      this.memorabiliaData = data;
      this.showDetails = true;
    }
  }
};
</script>
<style lang="less" scoped>
.parameterStatistical {
  font-size: 14px;
  .topSearch {
    position: absolute;
    top: 10px;
    right: 150px;
    height: 30px;
    line-height: 30px;
    display: flex;
    flex-flow: wrap nowrap;
  }
  .statisticalContent {
    height: 100%;
    width: 100%;
    display: flex;
    flex-flow: wrap nowrap;
  }
  .contentTitle {
    border-left: 4px solid @kr-elementUI-color;
    padding-left: 5px;
    margin-bottom: 15px;
    text-align: left;
    font-size: 18px;
    font-weight: bolder;
  }
  .statisticalLeft {
    display: flex;
    flex-flow: column nowrap;
    height: 100%;
  }
  .overviewPie {
    margin: auto;
  }
  .statisticalRight {
    background-color: #ffffff;
    display: flex;
    flex-flow: column nowrap;
    height: 100%;
    padding: 20px;
  }
  .leftTop,
  .leftBottom {
    height: 50%;
    background-color: #ffffff;
    padding: 20px;
  }
  .leftBottom {
    margin-top: 20px;
  }
  .reightTop,
  .rightBottom {
    height: calc(50% - 10px);
  }
  .statisticalRight {
    width: 60%;
    margin-left: 15px;
  }
  .statisticalLeft {
    width: 40%;
  }
  .searchItem {
    height: 30px;
    line-height: 30px;
    /deep/.el-input__inner {
      height: 30px;
      line-height: 30px;
    }
    /deep/.el-input__icon {
      line-height: 30px;
    }
  }
  .searchItem + .searchItem {
    margin-left: 20px;
  }
  .memorabiliaContent {
    height: calc(100% - 40px);
    overflow: auto;
  }
  .lineContent {
    width: 100%;
    display: flex;
    flex-flow: wrap nowrap;
    justify-content: space-between;
    text-align: left;
    align-items: center;
    cursor: pointer;
    line-height: 30px;
    .lineTitel {
      width: calc(100% - 150px);
      padding-left: 2px;
      padding-right: 15px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .lineDate {
      width: 130px;
      min-width: 120px;
      padding: 0px 10px;
      text-align: right;
      color: #808080;
    }
  }
  .readLine {
    color: #999999;
    .lineDate {
      color: #b3b3b3 !important;
    }
  }
  .progressLine {
    width: 100%;
    display: flex;
    flex-flow: wrap nowrap;
    line-height: 30px;
    .lineLable {
      width: 300px;
      text-align: right;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 0px 15px;
      line-height: 30px;
    }
    .lineProgress {
      width: calc(100% - 360px);
      line-height: 30px;
      text-align: left;
    }
    .el-progress {
      height: 30px;
      line-height: 30px;
    }
  }
  .reightTopTitle {
    text-align: left;
    font-size: 16px;
    font-weight: bolder;
    margin: 15px;
  }
  .reightContent {
    height: calc(100% - 70px);
    overflow: auto;
  }
  .complete {
    color: #62c433;
  }
  .lineIcon {
    width: 21px;
    height: 30px;
    line-height: 30px;
    display: flex;
    flex-flow: column nowrap;
    text-align: center;
    .vertical {
      width: 0px;
      height: 10px;
      margin: 0px 8px;
      border-left: solid 1px #666666;
    }
    .iconCircle {
      width: 10px;
      height: 10px;
      margin: 0px 2px;
      line-height: 10px;
      color: #666666;
    }
  }
  .lagData {
    color: red;
  }
  .circle {
    width: 0px;
    height: 0px;
    margin-left: 5px;
    margin-right: 2px;
    border: 4px solid #eb4444;
    border-radius: 15px;
  }
  .hiddenCircle {
    border: 4px solid #f7050500;
  }
  .end /deep/.el-progress__text {
    color: #62c433;
  }
  .lag /deep/.el-progress__text {
    color: #eb4444;
  }
  /deep/.el-progress-bar__outer,
  /deep/.el-progress-bar__inner {
    border-radius: 0px;
  }
  .empty {
    color: #8f8f8f;
    height: 100px;
    line-height: 100px;
  }
}
</style>